<script setup lang="ts">
import SeamlessScroll from "../../components2/seamless-scroll/seamless-scroll.vue";
import { computed, onMounted, reactive } from "vue";
import { useBigScreenSettingStore } from "../../../../../store/modules/bigscreensetting";
import { storeToRefs } from "pinia";
import EmptyCom from "../../components2/empty-com/empty-com.vue";
import { ElMessage } from "element-plus";

const settingStore = useBigScreenSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 252,
    limitScrollNum: 3,
    // step:3
  },
  scroll: true,
});

const getData = () => {
  var res = {"success":true,"data":{"list":[{"alertdetail":"就织结程做今子面四题。","alertname":"各种报警","alertvalue":153.054,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10000,"phase":"A1","sbInfo":"构么史年权自器级想文该指品军同斯。","terminalno":100,"provinceName":"台湾","cityName":"随州市","countyName":"北辰区"},{"alertdetail":"山己东声南化。","alertname":"各种报警","alertvalue":199.639683293,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10001,"phase":"A1","sbInfo":"线年始计写备张办千工便王山王。","terminalno":101,"provinceName":"甘肃省","cityName":"九龙","countyName":"-"},{"alertdetail":"见据在热界论改。","alertname":"各种报警","alertvalue":61,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10002,"phase":"A1","sbInfo":"次业那那许九县院较指压儿世际建改。","terminalno":102,"provinceName":"台湾","cityName":"重庆市","countyName":"田阳县"},{"alertdetail":"及铁你求指体来号。","alertname":"各种报警","alertvalue":172.8,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10003,"phase":"A1","sbInfo":"着根员从次满节活打政万各光。","terminalno":103,"provinceName":"香港特别行政区","cityName":"宜春市","countyName":"天祝藏族自治县"},{"alertdetail":"压有水目属定己精酸。","alertname":"水浸告警","alertvalue":122.93264356884463,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10004,"phase":"A1","sbInfo":"领到如运使看天料己研名间团石。","terminalno":104,"provinceName":"甘肃省","cityName":"基隆市","countyName":"通州区"},{"alertdetail":"单物着声七。","alertname":"水浸告警","alertvalue":148.876684,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10005,"phase":"A1","sbInfo":"资委王须位号物件声心子准其京。","terminalno":105,"provinceName":"香港特别行政区","cityName":"拉萨市","countyName":"甘德县"},{"alertdetail":"正世究给元我。","alertname":"水浸告警","alertvalue":135.3118,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10006,"phase":"A1","sbInfo":"表已候来争细计政却话张提论参织。","terminalno":106,"provinceName":"福建省","cityName":"海口市","countyName":"镇康县"},{"alertdetail":"十化管况不适养万提。","alertname":"各种报警","alertvalue":126.7517835,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10007,"phase":"A1","sbInfo":"很期素证示十眼引气到需花文往车问。","terminalno":107,"provinceName":"西藏自治区","cityName":"嘉义县","countyName":"得荣县"},{"alertdetail":"维感界团回必先元速。","alertname":"水浸告警","alertvalue":175.34539728771,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10008,"phase":"A1","sbInfo":"值办青名拉至命常改世员或市路。","terminalno":108,"provinceName":"云南省","cityName":"永州市","countyName":"玛沁县"},{"alertdetail":"资门金形公统族面局心。","alertname":"各种报警","alertvalue":160.6,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10009,"phase":"A1","sbInfo":"方离技亲律图些活思定天据。","terminalno":109,"provinceName":"香港特别行政区","cityName":"内江市","countyName":"穆棱市"},{"alertdetail":"许称矿八资。","alertname":"各种报警","alertvalue":87.84453903,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10010,"phase":"A1","sbInfo":"先七队多系青系县组采边方。","terminalno":110,"provinceName":"青海省","cityName":"朔州市","countyName":"中宁县"},{"alertdetail":"术清何己例。","alertname":"水浸告警","alertvalue":146.4148768385,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10011,"phase":"A1","sbInfo":"候族文队步去称适些展半正化老今。","terminalno":111,"provinceName":"四川省","cityName":"辽源市","countyName":"泰和县"},{"alertdetail":"级干参养素月例。","alertname":"各种报警","alertvalue":167.349608375,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10012,"phase":"A1","sbInfo":"标周交都带构里把记转温保步。","terminalno":112,"provinceName":"陕西省","cityName":"重庆市","countyName":"东陵区"},{"alertdetail":"机出照任么转条形至。","alertname":"水浸告警","alertvalue":111.527,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10013,"phase":"A1","sbInfo":"整按说生式改眼该两们。","terminalno":113,"provinceName":"内蒙古自治区","cityName":"日喀则地区","countyName":"安源区"},{"alertdetail":"运面干术边还六色天。","alertname":"各种报警","alertvalue":142.374,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10014,"phase":"A1","sbInfo":"石九精始数安组东如育不话形志交写。","terminalno":114,"provinceName":"北京","cityName":"离岛","countyName":"奉化市"},{"alertdetail":"四证效大强传接都与别。","alertname":"各种报警","alertvalue":136.796,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10015,"phase":"A1","sbInfo":"院速利九斗影千系火风。","terminalno":115,"provinceName":"香港特别行政区","cityName":"吉林市","countyName":"孝昌县"},{"alertdetail":"正将经文说合们。","alertname":"水浸告警","alertvalue":127.11858218235382,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10016,"phase":"A1","sbInfo":"听教处越本置复织门花开产感也料律织。","terminalno":116,"provinceName":"香港特别行政区","cityName":"徐州市","countyName":"准格尔旗"},{"alertdetail":"共主规车利华党两。","alertname":"水浸告警","alertvalue":131.683,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10017,"phase":"A1","sbInfo":"单复历信导到离经常几志则最。","terminalno":117,"provinceName":"黑龙江省","cityName":"承德市","countyName":"西沙群岛"},{"alertdetail":"变行取阶行。","alertname":"各种报警","alertvalue":96.865,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10018,"phase":"A1","sbInfo":"好解党石队数深状物五因大为还。","terminalno":118,"provinceName":"海外","cityName":"白山市","countyName":"和平区"},{"alertdetail":"属时共有领情后题。","alertname":"各种报警","alertvalue":158.9474186774,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10019,"phase":"A1","sbInfo":"能却了同是接高同满积也。","terminalno":119,"provinceName":"贵州省","cityName":"孝感市","countyName":"利通区"},{"alertdetail":"海办亲眼正。","alertname":"水浸告警","alertvalue":119.49508,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10020,"phase":"A1","sbInfo":"准习八实只影当社将而改。","terminalno":120,"provinceName":"山西省","cityName":"榆林市","countyName":"-"},{"alertdetail":"只听产边论常三军外。","alertname":"各种报警","alertvalue":134.67748835252468,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10021,"phase":"A1","sbInfo":"数义照及只认年下与南际着调验保机机。","terminalno":121,"provinceName":"山西省","cityName":"张家界市","countyName":"大安市"},{"alertdetail":"除增权看商。","alertname":"水浸告警","alertvalue":116.0785626780745,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10022,"phase":"A1","sbInfo":"部人六王开内严但品江难能经命员求日。","terminalno":122,"provinceName":"河南省","cityName":"凉山彝族自治州","countyName":"北辰区"},{"alertdetail":"国市二七三委。","alertname":"各种报警","alertvalue":149.48224147487377,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10023,"phase":"A1","sbInfo":"之王率按结不声他太部现条现问。","terminalno":123,"provinceName":"安徽省","cityName":"阿里地区","countyName":"普陀区"},{"alertdetail":"代和象很八。","alertname":"各种报警","alertvalue":164.8644,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10024,"phase":"A1","sbInfo":"那活装口元采示提将党当计切。","terminalno":124,"provinceName":"广西壮族自治区","cityName":"保定市","countyName":"兴国县"},{"alertdetail":"压术体走眼外权运极。","alertname":"水浸告警","alertvalue":151.427782,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10025,"phase":"A1","sbInfo":"回示表金清就思体受东确器强史青机般本。","terminalno":125,"provinceName":"山西省","cityName":"吴忠市","countyName":"柏乡县"},{"alertdetail":"类连全养影特命效住养。","alertname":"水浸告警","alertvalue":123,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10026,"phase":"A1","sbInfo":"府会除具完构原厂要省火低界党万。","terminalno":126,"provinceName":"云南省","cityName":"舟山市","countyName":"焉耆回族自治县"},{"alertdetail":"面适会率连只是物造。","alertname":"各种报警","alertvalue":114.6589600624,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10027,"phase":"A1","sbInfo":"他史音际老直少队写毛命运时。","terminalno":127,"provinceName":"山东省","cityName":"邢台市","countyName":"二林镇"},{"alertdetail":"需进究世或切。","alertname":"各种报警","alertvalue":195.25537077,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10028,"phase":"A1","sbInfo":"省元情石术联列争民门效。","terminalno":128,"provinceName":"福建省","cityName":"漯河市","countyName":"九龙城区"},{"alertdetail":"很较开参和斗证去京。","alertname":"水浸告警","alertvalue":145.64638157171285,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10029,"phase":"A1","sbInfo":"百外林始每持更果出体人情他日。","terminalno":129,"provinceName":"湖南省","cityName":"临夏回族自治州","countyName":"金台区"},{"alertdetail":"米后两好应速。","alertname":"各种报警","alertvalue":112.568468915239,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10030,"phase":"A1","sbInfo":"教油须界更风有飞越毛很比实第什通表听。","terminalno":130,"provinceName":"江苏省","cityName":"汕尾市","countyName":"其它区"},{"alertdetail":"就电养中拉当。","alertname":"水浸告警","alertvalue":107.346227789,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10031,"phase":"A1","sbInfo":"派这年红别得专九给照育取给于当满圆。","terminalno":131,"provinceName":"湖北省","cityName":"固原市","countyName":"泸水县"},{"alertdetail":"满收相连思法拉反才应。","alertname":"各种报警","alertvalue":89.34,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10032,"phase":"A1","sbInfo":"员被品前精活太空文维才。","terminalno":132,"provinceName":"西藏自治区","cityName":"海口市","countyName":"市中区"},{"alertdetail":"查年干即装提。","alertname":"各种报警","alertvalue":187.373196027334,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10033,"phase":"A1","sbInfo":"没期通消工照三想划完角铁山。","terminalno":133,"provinceName":"江西省","cityName":"扬州市","countyName":"钟楼区"},{"alertdetail":"感相单还斯示参中线。","alertname":"各种报警","alertvalue":192.2627043142718,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10034,"phase":"A1","sbInfo":"酸也全出响且革群热政除做头是应器。","terminalno":134,"provinceName":"河南省","cityName":"澳门半岛","countyName":"大武口区"},{"alertdetail":"强保上面厂层。","alertname":"水浸告警","alertvalue":141.9191778627,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10035,"phase":"A1","sbInfo":"矿子然济规效府传北由段近也北争。","terminalno":135,"provinceName":"内蒙古自治区","cityName":"荆门市","countyName":"其它区"},{"alertdetail":"红满了者主基达速最。","alertname":"各种报警","alertvalue":75.84211184621134,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10036,"phase":"A1","sbInfo":"性效整公强对向位样火。","terminalno":136,"provinceName":"宁夏回族自治区","cityName":"衢州市","countyName":"其它区"},{"alertdetail":"还论些识由程。","alertname":"水浸告警","alertvalue":139.875,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10037,"phase":"A1","sbInfo":"快百国空例响统听适表五被油史酸。","terminalno":137,"provinceName":"陕西省","cityName":"庆阳市","countyName":"平安县"},{"alertdetail":"识白代置习。","alertname":"水浸告警","alertvalue":158.64859982827434,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10038,"phase":"A1","sbInfo":"满月如表条半主给技原各重动。","terminalno":138,"provinceName":"安徽省","cityName":"巴中市","countyName":"美兰区"},{"alertdetail":"理织改点由多代置利。","alertname":"各种报警","alertvalue":166.761,"createtime":"2022-04-19 08:38:33","deviceid":null,"gatewayno":10039,"phase":"A1","sbInfo":"委备据界且眼统量总正。","terminalno":139,"provinceName":"上海","cityName":"铜仁市","countyName":"平和县"}]}};
  // rightBottom({ limitNum: 20 })
  //   .then((res) => {
  //     console.log("右下", res);
  //     if (res.success) {
        state.list = res.data.list;
    //   } else {
    //     ElMessage({
    //       message: res.msg,
    //       type: "warning",
    //     });
    //   }
    // })
    // .catch((err) => {
    //   ElMessage.error(err);
    // });
};

const comName = computed(() => {
  if (indexConfig.value.rightBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
function montionFilter(val: any) {
  // console.log(val);
  return val ? Number(val).toFixed(2) : "--";
}
const handleAddress = (item: any) => {
  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
};
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
    <component
      :is="comName"
      :list="state.list"
      v-model="state.scroll"
      :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step"
      :limitScrollNum="state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover"
      :singleWaitTime="state.defaultOption.singleWaitTime"
      :wheel="state.defaultOption.wheel"
    >
      <ul class="right_bottom">
        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels">设备ID：</span>
                <span class="text-content zhuyao"> {{ item.gatewayno }}</span>
              </div>
              <div class="info">
                <span class="labels">型号：</span>
                <span class="text-content"> {{ item.terminalno }}</span>
              </div>
              <div class="info">
                <span class="labels">告警值：</span>
                <span class="text-content warning"> {{ montionFilter(item.alertvalue) }}</span>
              </div>
            </div>

            <div class="flex">
              <div class="info">
                <span class="labels shrink-0"> 地址：</span>
                <span class="ciyao truncate" style="font-size: 12px; width: 220px" :title="handleAddress(item)">
                  {{ handleAddress(item) }}</span
                >
              </div>
              <div class="info time shrink-0">
                <span class="labels">时间：</span>
                <span class="text-content" style="font-size: 12px"> {{ item.createtime }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="info">
                <span class="labels">报警内容：</span>
                <span class="text-content ciyao" :class="{ warning: item.alertdetail }">
                  {{ item.alertdetail || "无" }}</span
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("@/assets/img/zuo_xuxian.png");
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: #1890ff;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }
  }
}

.right_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 252px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>
